<template>
    <div id="pet">
        <div class="pet-main">
            <ul class="pet-m-ul">
                <li v-for="(item, index) in petList" :key="index" class="pet-m-ul-li">
                    <el-card class="pet-m-ul-li-box-card" :body-style="{ padding: '0px' }">
                        <div slot="header" class="pet-m-ul-li-box-card-header">
                            <el-popover width="150" trigger="click">
                                <el-button type="primary" size="mini" @click="DeletePet(item)">删除宠物信息</el-button>
                                <div class="d-m-ul-box-card-header-img" slot="reference">
                                    <img :src="item.user_portraitSrc" class="pet-m-ul-li-box-card-header-img">
                                </div>
                            </el-popover>
                            <!-- <img :src="item.user_portraitSrc" class="pet-m-ul-li-box-card-header-img"> -->
                            <span class="pet-m-ul-li-box-card-header-name">{{ item.petName }}</span>
                            <div class="pet-m-ul-li-box-card-header-type">
                                <div>性别：{{ transformGender(item.gender) }}</div>
                                <div>年龄：{{ item.age }}</div>
                                <div>疫苗：{{ item.isDewormed == '1' ? '已免疫' : '未免疫' }}</div>
                                <div>绝育：{{ item.isNeutered == '1' ? '已绝育' : '未绝育' }}</div>
                            </div>
                        </div>
                        <div class="pet-m-ul-li-box-card-body">
                            <div class="pet-m-ul-li-box-card-body-introduce">{{ item.introduction }}</div>
                            <div class="pet-m-ul-li-box-card-body-main">
                                <img :src="item.portraitSrc">
                            </div>
                        </div>
                    </el-card>
                    <el-divider></el-divider>
                </li>
            </ul>
        </div>
        <el-tooltip effect="light" content="添加宠物" placement="top">
            <i class="el-icon-plus pet-add" @click="drawerShowed = true"></i>
        </el-tooltip>
        <!-- 抽屉添加宠物 -->
        <el-drawer ref="drawer" :visible.sync="drawerShowed" :with-header="false" direction="ltr" v-if="drawerShowed"
            size="40%" :before-close="handleClose" class="drawer" destroy-on-close>
            <el-form ref="form" label-position="right" label-width="80px" :model="formData"
                class="huily-flex-container-column drawer-form">
                <el-form-item class="el-form-item-img">
                    <el-upload ref="upload" :action="action" accept="image/*" :on-preview="handlePreview"
                        :on-remove="handleRemove" :on-success="handleSuccess" :show-file-list="false">
                        <div class="box-img">
                            <img :src="formData.portraitSrc" alt="">
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="" prop="type">
                    <el-radio-group v-model="formData.type">
                        <el-radio label=0>猫猫</el-radio>
                        <el-radio label=1>狗狗</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="名称" prop="petName">
                    <el-input v-model="formData.petName"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="address">
                    <el-radio-group v-model="formData.gender">
                        <el-radio label="2">隐藏</el-radio>
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="疫苗" prop="address">
                    <el-radio-group v-model="formData.isDewormed">
                        <el-radio label="2">未知</el-radio>
                        <el-radio label="1">已接种</el-radio>
                        <el-radio label="0">未接种</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="绝育" prop="address">
                    <el-radio-group v-model="formData.isNeutered">
                        <el-radio label="2">未知</el-radio>
                        <el-radio label="1">已绝育</el-radio>
                        <el-radio label="0">未绝育</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="formData.age"></el-input>
                </el-form-item>
                <el-form-item label="品种" prop="breedID">
                    <el-select v-model="formData.breedID">
                        <el-option v-for="item in breedList" :key="item.breedName" :label="item.breedName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="介绍" prop="introduction">
                    <el-input v-model="formData.introduction" type="textarea" maxlength="500" show-word-limit></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: 'pet',
        data() {
            return {
                drawerShowed: false,
                formData: {
                    type: '0',
                    gender: '2',
                    isNeutered: '2',
                    isDewormed: '2',
                    portraitSrc: this.$baseURL + '/static/img/dogbase.jpg'
                },
                petList: [],
                breedList: [],
                breedAllList: [],
                action: this.$baseURL + '/upload'
            }
        },
        watch: {
            'formData.type': {
                handler(newVal) {
                    this.breedList = this.breedAllList.filter(item => item.type == newVal)
                },
                immediate: true
            }
        },
        methods: {
            submitForm() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.formData.ownerID = JSON.parse(localStorage.getItem('HuiLY')).userinfo?.id
                        this.$POST('/pet/insert', this.formData).then((response) => {
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                center: true,
                                duration: 800,
                            })
                            this.GetPetList()
                            this.drawerShowed = false
                        }).catch((response) => {
                            this.$message({
                                message: response.data.msg + response.data.error,
                                type: 'error',
                                center: true,
                                duration: 1000,
                            })
                        })
                    } else {
                        this.$message({
                            message: '表单验证失败！',
                            type: 'error',
                            center: true,
                            duration: 1000,
                        })
                        return false;
                    }
                });
            },
            /**
             * @param {Function} done 用户关闭抽屉函数
             */
            handleClose(done) {
                this.formData = {
                    type: '0',
                    gender: '2',
                    isNeutered: '2',
                    isDewormed: '2',
                    portraitSrc: this.$baseURL + '/static/img/dogbase.jpg'
                }
                done()
            },
            // 点击列表文件回调
            handlePreview() {
            },
            handleRemove() {

            },
            handleSuccess(response, file, fileList) {
                this.$refs.upload.clearFiles()
                this.formData.portraitSrc = response.imgURL
            },
            // 获取品种列表
            GetBreedList() {
                this.$GET('/breed/getAllList').then((response) => {
                    let data = response.data.data
                    this.breedAllList = data
                }).catch((response) => {
                    console.error(response.data.error);
                })
            },
            // 获取我的宠物
            GetPetList() {
                this.$GET('/pet/getOnlyOwner', { ownerID: JSON.parse(localStorage.getItem('HuiLY')).userinfo?.id })
                    .then((response) => {
                        this.petList = response.data.data
                    })
                    .catch(() => { })
            },
            /**
             * @param {number | string} value 
             */
            transformGender(value) {
                switch (parseInt(value)) {
                    case 0: return '男'
                    case 1: return '女'
                    default: return '未知'
                }
            },
            DeletePet(item) {
                this.$DELETE('/pet/deletePet', { model: item })
                    .then((res) => {
                        this.$message({
                            type: 'success',
                            duration: 1000,
                            message: res.data.msg
                        })
                        this.GetPetList()
                    }).catch(_ => { })
            }
        },
        mounted() {
            this.GetBreedList()
            this.GetPetList()
        },
        activated() {
            this.GetBreedList()
            this.GetPetList()
        }
    }
</script>

<style scoped lang="less">
    #pet {
        width: 100%;
        position: relative;

        .pet-main {
            .pet-m-ul {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .pet-m-ul-li {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    flex: 1;

                    .pet-m-ul-li-box-card {
                        width: 80%;
                        height: 600px;
                        padding: 10px;
                        margin: 10px 25px;
                        text-align: left;
                        flex: 1;

                        &:hover {
                            border: 1px solid rgb(250, 220, 100);
                            box-shadow: 5px 5px 5px rgb(250, 220, 100);
                        }

                        .pet-m-ul-li-box-card-header {
                            display: flex;
                            flex-direction: row;
                            justify-content: flex-start;
                            align-items: center;

                            .pet-m-ul-li-box-card-header-img {
                                display: inline-block;
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                                padding: 5px;
                            }

                            .pet-m-ul-li-box-card-header-name {
                                display: inline-block;
                                vertical-align: middle; // 对齐方式
                                text-align: center;
                                flex: 1;
                                font-size: 24px;
                                font-weight: 700;
                            }

                            .pet-m-ul-li-box-card-header-type {
                                display: inline;
                                vertical-align: middle; // 对齐方式
                                margin-left: 30px;
                                align-items: flex-end;
                            }
                        }

                        &-body {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;

                            .pet-m-ul-li-box-card-body-introduce {
                                display: block;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                width: 80%;
                                height: 100px;
                                line-height: 100px;
                                text-align: center;
                            }

                            &-main {
                                width: 80%;
                                max-height: 600px;
                                flex: 1;
                                display: flex;
                                flex-direction: row;
                                justify-content: center;
                                align-items: center;
                                overflow: hidden;
                                border-radius: 15px;

                                img {
                                    width: 50%;
                                    border-radius: 15px;
                                }
                            }
                        }
                    }
                }
            }

        }

        .pet-add {
            position: fixed;
            bottom: 10%;
            right: 2%;
            font-size: 50px;
            // color: rgb(20, 40, 150);
            color: var(--mian-font-color);
            background-color: rgb(250, 220, 100);
            border-radius: 50%;
            display: inline-block;

            &:hover {
                transform: rotate(0.5turn) scale(1.1);
                transition: all .5s;
            }
        }

        .drawer {
            .drawer-form {
                align-items: start;
                justify-content: flex-start;

                .el-form-item-img {
                    // align-self: center;
                    margin-top: 20px;

                    .box-img {
                        display: flex;
                        width: 65px;
                        height: 65px;
                        border: 1px solid var(--main-bg-color);
                        overflow: hidden;
                        justify-content: center;
                        align-items: center;
                        float: left;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                }
            }
        }
    }
</style>